<!--
 * @Descripttion: 0
 * @version: 1.0
 * @Author: 郝汉森
 * @Date: 2020-08-23 21:05:01
 * @LastEditors: 郝汉森
 * @LastEditTime: 2020-08-26 10:32:50
-->
<!--
 * @Author: your name
 * @Date: 2020-08-22 01:51:42
 * @LastEditTime: 2020-08-25 20:30:10
 * @LastEditors: 郝汉森
 * @Description: In User Settings Edit
 * @FilePath: \exam-list\src\components\checkpaper\PaperDetail.vue
-->
<template>
  <div class="questionsType">
    <h2>添加试题</h2>
    <el-card class="box-card">
      <el-row>
        <el-button type="primary" @click="centerDialogVisible=true">+ 添加类型</el-button>
      </el-row>
      <!-- 表格区域 -->
      <el-table :data="questionsType" style="width: 100%">
        <el-table-column prop="questions_type_id" label="类型ID"></el-table-column>
        <el-table-column prop="questions_type_text" label="类型名称"></el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button type="primary" icon="el-icon-delete" size="mini"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加框区域 -->
    <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center @close='typeValue=""'>
      <el-input placeholder="请输入类型名称" v-model="typeValue"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addTypeBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  data() {
    return {
      centerDialogVisible:false,
      typeValue:'',
    }
  },
  created() {
    this.getQuestionsTypeApi()
  },
  computed: {
    ...mapState('Question', ['questionsType']),
  },
  methods: {
    ...mapActions('Question', ['getQuestionsTypeApi','addQuestionsTypeApi']),
    addTypeBtn(){
      this.centerDialogVisible = false
      if(this.typeValue!==''){
        console.log(this.questionsType)
        this.addQuestionsTypeApi({text:this.typeValue,sort:this.questionsType[this.questionsType.length-1].questions_type_sort*1+1})
      }
    }
  },
}
</script>

<style lang='scss'>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
